<template>
  <view class="container">
    <view class="search flex align-center">
      <u-icon name="arrow-left" size="22" @click="goBack"></u-icon>
      <text
        @click="goSearch"
        class="search-icon flex align-center cuIcon-search"
        ><text style="margin-left: 20rpx">请输入你想搜索的内容</text></text
      >
    </view>
    <scroll-view
      class="scroll"
      scroll-y
      :refresher-threshold="50"
      :refresher-background="'#FDFDFD'"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refresherrefresh"
      @scrolltolower="loadMore"
      style="height: calc(100vh - 100rpx)"
    >
      <!-- 服务商品与服务商tab栏切换 -->
      <view class="tabs flex algin-center">
        <view
          class="tab-item"
          :class="current == index ? 'active_true' : 'active_false'"
          @click="tabClick(item, index)"
          v-for="(item, index) in tabList"
          :key="index"
        >
          <text>
            {{ item.name }}
          </text>
        </view>
      </view>

      <!-- 服务区域、选择服务、综合排序筛选 -->
      <view class="chose-area solid-bottom">
        <view class="chose-type">
          <view @click="showCityListFn">
            <chose-region
              :disabled="true"
              @change1="regionName"
              @changes1="regionValue"
            >
              <view class="chose-item">
                <text v-if="choseRegion1" class="title">{{
                  choseRegion1.name
                }}</text>
                <text v-else class="title">服务区域</text>
                <text class="icon"></text>
              </view>
            </chose-region>
          </view>
          <view class="chose-item" @click="showCategory">
            <text v-if="cateName" class="title">{{ cateName }}</text>
            <text v-else class="title">选择服务</text>
            <text class="icon"></text>
          </view>
          <picker :range="sortData" @change="changeSort" @cancel="cancelSort" :value="sortValue">
            <view class="chose-item">
              <text v-if="sortKey" class="title">{{ sortData[sortKey] }}</text>
              <text v-else class="title">综合排序</text>
              <text class="icon"></text>
            </view>
          </picker>
        </view>
      </view>

      <!-- 服务商品列表 -->
      <view v-if="current == 0" class="shop-list">
        <view
          class="shop-item"
          v-for="(item, index) in shopList"
          :key="index"
          @click="goShopDetail(item)"
        >
          <view class="img">
            <image :src="item.pic[0]" mode="aspectFill"></image>
          </view>
          <view class="item">
            <text class="title1 ellipsis1">
              {{ item.name }}
            </text>
            <text class="title2">
              {{ item.price == 0 ? "面议" : "¥" + item.price }}
            </text>
            <text class="title3 ellipsis1">
              {{ item.serviceinfo.city }}丨{{ item.serviceinfo.name }}
            </text>
          </view>
        </view>
        <uni-load-more
          v-if="shopList.length > 0"
          :status="shopStatus"
        ></uni-load-more>
        <view v-if="shopList.length === 0" class="empty-wrap">
          <image
            class="empty-img"
            src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
          ></image>
          <text class="tips">暂无内容</text>
        </view>
      </view>

      <!-- 服务商列表 -->
      <view v-if="current == 1" class="service-list">
        <view
          class="service-item"
          v-for="(item, index) in serviceList"
          :key="index"
          @click="goServiceInfo(item)"
        >
          <view class="img">
            <image :src="item.logo" mode="aspectFill"></image>
          </view>
          <view class="item">
            <view class="service-type_new">
              <view v-if="item.type == 1" class="tag">官方</view>
              <text class="title1 ellipsis1">
                {{ item.name }}
              </text>
            </view>
            <text v-if="item.good_services.length > 0" class="title2">
              擅长服务：{{ item.good_services.join("、") }}
            </text>
            <view style="margin-top: 16rpx">
              <text class="cuIcon-location"></text>
              <text class="title3">
                {{ item.city }}
              </text>
            </view>
          </view>
        </view>
        <uni-load-more
          v-if="serviceList.length > 0"
          :status="serviceStatus"
        ></uni-load-more>
        <view v-if="serviceList.length === 0" class="empty-wrap">
          <image
            class="empty-img"
            src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
          ></image>
          <text class="tips">暂无内容</text>
        </view>
      </view>
    </scroll-view>

    <!-- 服务类目 -->
    <view>
      <u-popup
        :show="categoryShow"
        closeable
        mode="bottom"
        @close="categoryShow = false"
        :closeOnClickOverlay="true"
      >
        <view class="cate-title">
          <view class="title solid-bottom">
            <view class="all-cate" @click="choseAll">重置</view>
            <view class="title-chose">选择服务</view>
          </view>
          <view class="VerticalBox">
            <scroll-view class="VerticalNav" :scroll-y="true">
              <view
                class="cu-item"
                :class="index == tabCur ? 'first-cate cur' : ''"
                v-for="(item, index) in categoryList"
                :key="index"
                @tap="tabSelect(item, index)"
              >
                {{ item.name }}
              </view>
            </scroll-view>
            <scroll-view class="vertical-main" :scroll-y="true">
              <view class="right-main">
                <view
                  class="main-item"
                  v-for="(item, index) in cateSecondList"
                  :key="index"
                >
                  <view class="item-title" @click="secondClick(item)">
                    {{ item.name }}
                  </view>
                  <view class="item-content">
                    <view
                      class="item-val"
                      v-for="(val, idx) in item.third"
                      :key="idx"
                      @click="thirdClick(val)"
                    >
                      {{ val.name }}
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </u-popup>
    </view>

    <!-- 服务区域 -->
    <u-popup :show="showCityList" @close="closeCityList">
      <view class="city_list" style="height: 80vh; padding: 30rpx 0;">
        <wfAddress @getCityInfo="getCityInfo"></wfAddress>
      </view>
    </u-popup>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../enterpriseServer/service/index"
></script>

<style lang="scss" scoped>
@import "index.scss";
</style>
